<template>
    <div class="summarize">
        <!-- 经营概况 Start -->
        <el-card shadow="never" class="!border-none">
            <template #header>
                <div class="header">经营概况</div>
            </template>
            <div class="pb-[16px] pt-[16px]">
                <el-row :gutter="20">
                    <el-col :md="6" :span="12" class="flex mt-1">
                        <div class="flex">
                            <img style="width: 60px; height: 60px" src="../images/total.png" />
                            <div class="flex-col items-center pt-[4px] ml-[10px]">
                                <div class="text-tx-regular text-xs">累计营业额（元）</div>
                                <div class="text-4xl font-medium">
                                    {{ financeData.total_amount || '0.00' }}
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :md="6" :span="12" class="flex mt-1">
                        <div class="flex">
                            <img style="width: 60px; height: 60px" src="../images/money.png" />
                            <div class="flex-col items-center pt-[4px] ml-[10px]">
                                <div class="text-tx-regular text-xs">累计成交订单（笔）</div>
                                <div class="text-4xl font-medium">
                                    {{ financeData.total_order || '0.00' }}
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :md="6" :span="12" class="flex mt-1">
                        <div class="flex">
                            <img style="width: 60px; height: 60px" src="../images/total.png" />
                            <div class="flex-col items-center pt-[4px] ml-[10px]">
                                <div class="text-tx-regular text-xs">已退款金额</div>

                                <div class="text-4xl font-medium">
                                    {{ financeData.total_refund_amount || '0.00' }}
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :md="6" :span="12" class="flex mt-1">
                        <div class="flex">
                            <img style="width: 60px; height: 60px" src="../images/money.png" />
                            <div class="flex-col items-center pt-[4px] ml-[10px]">
                                <div class="text-tx-regular text-xs">待退款金额（元）</div>
                                <div class="text-4xl font-medium">
                                    {{ financeData.wait_refund_amount || '0.00' }}
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-card>
        <!-- 经营概况 Start -->

        <!-- 用户概况 Start -->
        <el-card shadow="never" class="mt-4 !border-none">
            <template #header>
                <div class="header">用户概况</div>
            </template>
            <div class="pb-[16px] pt-[16px]">
                <el-row :gutter="20">
                    <el-col :md="6" :span="12" class="flex mt-1">
                        <div class="flex">
                            <img style="width: 60px; height: 60px" src="../images/total.png" />
                            <div class="flex-col items-center pt-[4px] ml-[10px]">
                                <div class="text-tx-regular text-xs">用户充值金额（元）</div>
                                <div class="text-4xl font-medium">
                                    {{ financeData.total_recharge_amount || '0.00' }}
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :md="6" :span="12" class="flex mt-1">
                        <div class="flex">
                            <img style="width: 60px; height: 60px" src="../images/money.png" />
                            <div class="flex-col items-center pt-[4px] ml-[10px]">
                                <div class="text-tx-regular text-xs">用户可用余额（元）</div>
                                <div class="text-4xl font-medium">
                                    {{ financeData.user_money || '0.00' }}
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :md="6" :span="12" class="flex mt-1">
                        <div class="flex">
                            <img style="width: 60px; height: 60px" src="../images/total.png" />
                            <div class="flex-col items-center pt-[4px] ml-[10px]">
                                <div class="text-tx-regular text-xs">用户可提现余额（元）</div>
                                <div class="text-4xl font-medium">
                                    {{ financeData.user_earnings || '0.00' }}
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :md="6" :span="12" class="flex mt-1">
                        <div class="flex">
                            <img style="width: 60px; height: 60px" src="../images/money.png" />
                            <div class="flex-col items-center pt-[4px] ml-[10px]">
                                <div class="text-tx-regular text-xs">用户已提现余额（元）</div>
                                <div class="text-4xl font-medium">
                                    {{ financeData.user_earnings_withdraw || '0.00' }}
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-card>
        <!-- 用户概况 End -->
    </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { apiFinanceDataCenter } from '@/api/finance'

/** Interface Start **/
// interface FinanceObj {
//     total_amount: number; //	float	课程总收入
//   order_num: number; //	int	课程总订单数
//   refund_sum: number; //	float	课程总收入
//   refund_num: number; //	int	退款订单总数
//   user_money_sum: number; //	float	用户总资产
//   user_num: number; //	int	用户总人数
//   visitor: number; //	int	总访问量
//   recharge_sum: number; //	float	累计充值金额
//   recharge_num: number; //	int	累计充值次数
//   award_sum: number; //	float	累计赠送金额
// }
/** Interface End **/

/** Data Start **/
// const financeData = ref<FinanceObj>({});
const financeData = ref<any>({})
/** Data End **/

/** Methods Start **/
const initFinanceDataCenter = async (): Promise<void> => {
    try {
        financeData.value = await apiFinanceDataCenter()
    } catch (error) {
        console.log('初始化财务概括=>', error)
    }
}
/** Methods End **/

/** Life Cycle Start **/
initFinanceDataCenter()
/** Life Cycle End **/
</script>

<style lang="scss" scoped>
.header {
    font-size: 14px;
    font-weight: 500;
    padding-left: 10px;
    border-left: 3px solid #4a5dff;
}
</style>
